<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>

		<title>Zapatec DHTML Calendar</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link rel="stylesheet" type="text/css" media="all" href="../themes/winxp.css" title="winxp" >
		<link href="../doc/css/zpcal.css" rel="stylesheet" type="text/css">
		<link href="../doc/css/template.css" rel="stylesheet" type="text/css">
		<link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico">


		<!-- import the calendar script -->
		<script type="text/javascript" src="../src/utils.js"></script>
		<script type="text/javascript" src="../src/calendar.js"></script>

		<!-- import the language module -->
		<script type="text/javascript" src="../lang/calendar-en.js"></script>

		<!-- other languages might be available in the lang directory; please check
		your distribution archive. -->

		<!-- import the calendar setup script -->
		<script type="text/javascript" src="../src/calendar-setup.js"></script>
	</head>
	<body>
		<table class='zpStandard' width='800'> 
			<tr>
				<td>
					<div class="topMenuHeader">
						<div class="logo">
							<a href='http://www.zapatec.com'><img src='../doc/images/logoNew.gif' alt='Zapatec logo' border='0'></a>
						</div>
						<div class="btn1">
							<a href="https://www.zapatec.com/zadmin/buy.jsp"><img src="../doc/images/buttonBuy.png" alt='My Account' border="0"></a>                                                                                                                                                                 </div>
						<div class="btn1">
							<a href="http://www.zapatec.com/website/main/pricing.jsp"><img src="../doc/images/buttonPricing.png" alt='My Account' border="0"></a>
						</div>
					</div>

				</div>

			<a href='example4.html' style='float:left; margin-left:2em; margin-top:.5em;'> <img border='0' src='previous.gif' alt='previous Javascript Calendar Example'></a>
			<a href='example6.html' style='float:right; margin-right:2em; margin-top:.5em;'><img border='0' src='next.gif' alt='previous Javascript Calendar Example'></a>
<div class='zpCalSubheader' style='text-align:center'> Flat Calendar different look for certain days</div>

<div class='zpCalDemoText'>
	<div style="float: right; margin-left: 1em; margin-bottom: 1em;"
		id="calendar-container">

		<div style='text-align:center; font-weight:bold' id="preview"> Click on a date</div>
		<br/>
	</div>
	<ol>
		<li> This is a flat or "in the page" calendar. It is displayed when the page loads rather than when the user clicks on a button. </li>
		<li> When you click on a date the calendar calls a Javascript function (callback) which, in this case, prints the date above the calendar.

		<li> Certain days have been specified as <strong> special </strong> days, and they are displayed differently.
		In this demonstration, the following were specified as special dates: 

		<br/>
		<br/>
		<ul>
			<li> January 1 </li>
			<li>	May 1 </li>
			<li>	May 5 </li>
			<li>	July 4 </li>
			<li>	July 14 </li>
			<li>	November 29 </li>
			<li>	December 25 </li>
		</ul>
		</li>
	</ol>
</div>


<script type="text/javascript">
	<!--  to hide script contents from old browsers

	//months are 0 based which is a little confusing
	var SPECIAL_DAYS = [
	[0, 1], //january first
	[4, 1], //May 1
	[4, 5], //May 5
	[6, 4], //July 4
	[6, 14], //July 14
	[10, 29], //November 29
	[11, 25] //December 25
	];

	function dateIsSpecial(year, month, day) {
		for (ii = 0; ii < SPECIAL_DAYS.length; ii++) {
			if (((SPECIAL_DAYS[ii] [0]) == month) &&
			(((SPECIAL_DAYS[ii] [1]) == day))) {
				return true;
			}
		}
		return false;
	};

	function dateChanged(calendar) {
		var preview = document.getElementById("preview");
		if (preview) {
			preview.innerHTML = calendar.date.print('%a, %b %d, %Y');
		}
	}

	Zapatec.Calendar.setup(
	{
		flat         : "calendar-container", // ID of the parent element
		flatCallback : dateChanged,          // our callback function
		electric     : false,                // don't show the date till it's clicked
		dateStatusFunc : function(date, y, m, d) {
			if (dateIsSpecial(y, m, d)) return "zpCalSpecialDay";
			else return false; // other dates are enabled
			// return true if you want to disable other dates
		}
	}
	);
	// end hiding contents from old browsers  -->
</script>
<noscript>
	<br/>
	This page uses a <a href='http://www.zapatec.com/website/main/products/prod1/'> Javascript Calendar </a>, but
	your browser does not support Javascript. 
	<br/>
	Either enable Javascript in your Browser or upgrade to
	a newer version.
</noscript>


	<div class="footer" style='text-align:center; margin-top:2em'>
		<br/>
		&copy; 2004 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong>
	</div>
			</td>
		</tr>
	</table>

</body>
</html>
